<template>
  <div class="statio">
    <div class="search">
      <h2>劳动合同管理</h2>
      <div>
        <el-input
          clearable
          v-model="keyword"
          size="small"
          @keydown.enter.native="todoSearch"
          placeholder="搜索姓名/手机号/岗位"
          style="width: 222px"
        ></el-input>
        <el-button @click="todoSearch" type="primary" size="small"
          >查询</el-button
        >
      </div>
    </div>
    <base-table
      ref="baseTable"
      :tableSetting="tableSetting"
      @handleCommon="handleCommon"
    ></base-table>
    <!-- 单人合同详情 -->
    <el-dialog
      title="合同管理"
      :close-on-click-modal="true"
      :show-close="true"
      :visible.sync="dialogcont"
      @close="close('form')"
      class="postionbots"
      width="500px"
      center
    >
      <el-form
        status-icon
        ref="form"
        :model="form"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-alert title="基本信息" type="success" :closable="false"></el-alert>
        <el-form-item label="姓名 :" prop="name">
          <label>{{ form.name }}</label>
        </el-form-item>
        <el-form-item label="手机号 :" prop="phone">
          <label>{{ form.phone }}</label>
        </el-form-item>
        <el-form-item label="岗位 :" prop="deptName">
          <label>{{ form.deptName }}</label>
        </el-form-item>
        <el-alert title="合同信息" type="success" :closable="false"></el-alert>
        <el-form-item label="合同起始日期 :">
          <span v-if="contractList.length > 0">
            <p
              style="margin: 0"
              v-for="(item, index) in contractList"
              :key="index"
            >
              <label>{{ item.startDate }}</label>
              <span>至</span>
              <label>{{ item.endDate }}</label>
            </p>
          </span>
          <p style="margin: 0" v-if="contractList.length == 0">
            --暂未签订合同--
          </p>
        </el-form-item>
        <el-form-item label="合同开始日期" prop="startDate" v-if="isShowDate">
          <el-date-picker
            @change="changeDate1"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择开始日期"
            v-model.trim="reStartdate"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="合同结束日期" prop="endDate" v-if="isShowDate">
          <el-date-picker
            @change="changeDate2"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择结束日期"
            v-model.trim="reEnddate"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <p v-if="isShowDate" style="text-align: center; color: red">
          *请慎重选择合同续签日期，一旦修改不能更改
        </p>
      </el-form>
      <span slot="footer">
        <!-- <el-button @click="close('form')" v-if="!isShowDate">关 闭</el-button> -->
        <el-button @click="dialogcont = false" v-if="!isShowDate"
          >关 闭</el-button
        >
        <!-- <el-button type="primary" @click="renew" v-if="!isShowDate">续 签</el-button> -->
        <el-button type="primary" @click="renew" v-if="isRenew && !isShowDate"
          >续 签</el-button
        >

        <el-button @click="renew" v-if="isShowDate">取消</el-button>
        <el-button
          type="primary"
          @click="renewAffirm"
          v-if="isShowDate"
          :loading="loading"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import baseTable from "@/components/table/baseTable";
import {
  selectContract,
  selectContractByUid,
  insertContractByUid,
} from "@/service/Api.js"; //接口
import md5 from "js-md5";

export default {
  components: { baseTable },
  name: "personnelMent",
  props: ["menuFlag"],
  data() {
    return {
      keyword: "",
      tableSetting: {
        tableApiFn: selectContract,
        defaulteParams: {
          keyword: "",
        },
        options: [
          { prop: "id", label: "员工编号" },
          { prop: "name", label: "姓名" },
          { prop: "postName", label: "岗位" },
          { prop: "entryDate", label: "入职日期" },
          { prop: "lastStatus", label: "合同状态" },
          { prop: "lastStartDate", label: "合同起始日" },
        ],
        optionsColor: [
          { prop: "lastEndDate", label: "合同截止日", color: "red" },
        ],
        btns: [
          {
            text: "合同管理",
            size: "mini",
            handleName: "btnContract",
            type: "primary",
            plain: "plain",
          },
        ],
      },
      dialogcont: false,
      loading: false,
      form: {
        name: "",
        entryDate: "",
        phone: "",
        startDate: "",
        endDate: "",
      },
      contractList: [],
      isShowDate: false,
      isRenew: "",
      uid: "",
      reStartdate: "", //续签起始日期
      reEnddate: "", //续签结束日期
    };
  },
  created() {},
  methods: {
    handleCommon(name, row, idx) {
      if (this[name]) {
        this[name](row, idx);
      }
    },
    //关闭弹框
    close(formName) {
      this.$refs[formName].resetFields();
      this.isShowDate = false;
      this.dialogcont = false;
      this.reEnddate = "";
    },
    //查看合同信息
    btnContract(row) {
      this.isShowDate = false;
      this.uid = row.id;
      selectContractByUid(row.id).then((res) => {
        this.form = res.data.userInfo;
        this.contractList = res.data.contractList;
        this.isRenew = res.data.isRenew;
      });
      this.dialogcont = true;
    },
    //续签
    renew() {
      this.reStartdate = this.contractList[
        this.contractList.length - 1
      ].endDate;
      this.isShowDate = !this.isShowDate;
    },
    changeDate1(val) {
      this.reStartdate = val;
    },
    changeDate2(val) {
      this.reEnddate = val;
    },
    todoSearch() {
      this.tableSetting.defaulteParams = {
        keyword: this.keyword,
      };
      this.$refs.baseTable.initData(null, 1);
    },
    renewAffirm() {
      if (!this.reStartdate || !this.reEnddate) {
        this.$message.warning("请选择合同签订日期！");
        return;
      }
      this.loading = true;
      let data = {
        startDate: this.reStartdate,
        endDate: this.reEnddate,
        uid: this.uid,
      };
      insertContractByUid(data).then((res) => {
        this.loading = false;
        if (res.code == 0) {
          this.dialogcont = false;
          this.$message.success("合同签订成功！");
          this.$refs.baseTable.initData();
        } else {
          this.$message.warning(res.message);
        }
      });
    },
  },
};
</script>

<style scoped>
.search {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
